<!-- 购物车商品列表样式组件 -->
<template>
  <div class="product-item" v-for="item in product" :key="item.name">
    <div class="product-item-img">
      <img :src="item.imgUrl">
    </div>
    <div class="product-item-info">
      <div class="title">{{ item.name }}</div>
      <div class="content">
        <div class="content-count">￥{{ item.price }} x {{ item.count }}</div>
        <div class="content-total">￥{{ (item.price * item.count).toFixed(1) }}</div>
      </div>
    </div>
  </div>
</template>

<script>
//composition
export default {
  name: 'productList',
  props: ['product', 'count'],
  emits: ['show']
}
</script>

<style scoped lang="scss">
@import '@/styles/theme.scss';

.product-item {
  height: 12.2667vw;
  display: flex;
  margin-bottom: 16px;

  &-img {
    width: 12.2667vw;
    margin-right: 16px;

    img {
      width: 100%;
    }
  }

  &-info {
    flex: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .title {
      font-size: 14px;
      color: $theme-font-color;
      font-weight: bold;
    }

    .content {
      display: flex;
      justify-content: space-between;
      font-size: 14px;

      &-count {
        color: $remind-color;
      }

      &-total {
        color: #000;
      }
    }
  }
}</style>